<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="内容">
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数据表格</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.tableId" filterable clearable placeholder="请选择数据" size="mini"
                        @change="tableSelectChange">
                        <el-option v-for="item in dataTableList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数据列</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.colId" filterable clearable placeholder="请选择数据" size="mini">
                        <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <!-- <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>数据查询范围</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.filterTimeType" placeholder="选择列时间范围" size="mini"
                        style="width:190px;">
                        <el-option label="15天" :value="15" />
                        <el-option label="1天" :value="1" />
                        <el-option label="7天" :value="7" />
                        <el-option label="30天" :value="30" />
                        <el-option label="90天" :value="90" />
                        <el-option label="1年" :value="365" />
                        <el-option label="全部" :value="99" />
                    </el-select>
                    <el-tooltip class="item" effect="dark" content="设置数据查询的时间范围，默认查询最近15天" placement="top-start">
                        <i class="el-icon-warning formlabletips"></i>
                    </el-tooltip>
                </el-col>
            </el-row> -->
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数据量</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.tableData.count" max="20" type="number"
                        @change="setValueMaxInfo(20, obj.tableData, 'count')" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>图片轮播间隔</span>
                </el-col>
                <el-col :span="16" class="editcontent dobuleinput">
                    <input placeholder="请输入" type="number" style="width: 115px" v-model.number="obj.tableData.timeSpeed" />
                    <span>秒</span>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>更新频率</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input type="number" v-model.number="obj.tableData.reloadTime" class="miniinput"
                        @change="reloadTimeChangeHandle" />
                    <span>秒</span>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    name: "TableFileForm",
    components: {
        BoxForm: () => import('../mixin/BoxForm.vue'),
    },
    props: {
        obj: Object,
        predefineColors: Array,
        dataTableList: Array,
        columnData: Array,
        tableSelectChange: Function,
        setValueMaxInfo: Function,
        setColorChange: Function,
        reloadTimeChangeHandle: Function,
    },
    model: {
        prop: "obj",
        event: "change",
    },
    methods: {
        
    }
}
</script>